<template>
  <a-cascader
    :default-value="defaultValue"
    :options="options"
    :placeholder="record.options.placeholder"
    :allow-clear="record.options.clearable"
    :disabled="disabled"
    @change="onChange"
  />
</template>
<script>
import arealist from "./arealist.json";
export default {
  name: "AreaPicker",
  props: ["record", "value"],
  data() {
    return {
      options: arealist,
      defaultValue: [],
      disabled: this.record.options.disabled
    };
  },
  created() {
    const defaultValue = this.record.options.defaultValue;
    if (defaultValue && defaultValue.length > 0) {
      this.defaultValue = defaultValue.split(",");
    }
  },
  methods: {
    onChange(value) {
      this.$emit("input", value.join(","));
      this.$emit("change", value.join(","));
    }
  }
};
</script>
